<template>
  <div>
    <el-dialog width="620px" :visible.sync="visible" title="区域管理">
      <el-button type="primary" @click="$refs.FilightAreaAddDialogRef.show()"
        >添加区域</el-button
      >
      <el-table
        :data="tableData"
        height="500px"
        stripe
        style="width: 100%; margin-top: 10px"
      >
        <el-table-column prop="name" label="名称"></el-table-column>
        <el-table-column prop="area_type" label="类型"></el-table-column>
        <el-table-column prop="coordinare" label="坐标">
          <template slot-scope="scope">
            {{ scope.row.coordinare }}
          </template>
        </el-table-column>
        <el-table-column width="100" label="操作">
          <template slot-scope="scope">
            <el-button type="primary" size="mini" @click="remove(scope.row)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>
    <filight-area-add-dialog
      @success="init"
      ref="FilightAreaAddDialogRef"
    ></filight-area-add-dialog>
  </div>
</template>

<script>
import * as request from "../http/request.js";
import FilightAreaAddDialog from "./filight-area-add-dialog.vue";
export default {
  data() {
    return {
      visible: false,
      tableData: [],
    };
  },
  components: {
    FilightAreaAddDialog,
  },
  methods: {
    show() {
      this.visible = true;
      this.init();
    },
    init() {
      // 初始化
      request.areaShow().then((res) => {
        this.tableData = res.data.area;
      });
    },
    // 设置数据
    remove(row) {
      this.$confirm("确定要删除吗?", "删除确认", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        request.areaDel_area(row).then((res) => {
          console.log(res);
          const data = res.data;
          if (data.status === "-1") {
            this.$message.error(data.message);
          }
          if (data.status === "1") {
            this.$message.success(data.message);
            this.init();
          }
        });
      });
    },
  },
};
</script>

<style>
</style>